import React, { useState } from "react";
import InputAtom from "../../UI_KIT/Atoms/Input.Atom";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";
import { PersonalDataField, PersonalDataProps } from "./type";

interface FormData {
  [key: string]: string;
}

const PersonalData: React.FC<PersonalDataProps> = (props) => {
  const { t } = props;
  const personalDataItems = t("CheckoutPage.PersonalData", {
    returnObjects: true,
  }) as PersonalDataField[];

  const [formData, setFormData] = useState<FormData>({});

  const handleChange = (fieldName: string, value: string) => {
    setFormData((prevData) => ({
      ...prevData,
      [fieldName]: value,
    }));
  };

  return (
    <form action="" className="flex flex-col gap-y-5">
      {personalDataItems.map((field, index) => (
        <div className="flex flex-col gap-y-4" key={index}>
          <TextAtom
            type={TextAtomEnum.enum_h4}
            className="text-textColor text-regular"
          >
            {field.title}
          </TextAtom>
          <InputAtom
            type={field.type}
            placeholder={field.placeholder}
            value={formData[field.title] || ""}
            onChange={(newValue: string) => handleChange(field.title, newValue)}
          />
        </div>
      ))}
    </form>
  );
};

export default React.memo(PersonalData);
